<template>
  <el-container>
    <el-header>
      <span @click="outHome">仿知乎专栏</span>
      <div class="box1">
        <div style="margin-top: 15px;" v-if="token">
          <el-dropdown>
            <el-button type="primary">
              {{ store.state.name }}
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="goIndex">我的文章</el-dropdown-item>
                <el-dropdown-item @click="outLogin">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <div v-if="!token">
          <el-button type="primary" plain @click="goLogin">登录</el-button>
          <el-button type="primary" plain @click="goRegister">注册</el-button>
        </div>
      </div>
    </el-header>
    <el-main>
      <router-view />
    </el-main>
  </el-container>
</template>
<script lang="ts" setup>
import { useRouter } from "vue-router"
import { useStore } from 'vuex'

const store = useStore()

const id = store.state.column

const token: string = store.state.token

let router = useRouter()
// console.log(router);

let goLogin = () => {
  router.push('/login')
}

let goRegister = () => {
  router.push('/register')
}

const outLogin = async () => {
  localStorage.clear()
  await window.location.reload()  // 刷新页面
}

const outHome = () => {
  router.push('/')
}

const goIndex = () => {
  router.push({
    path: '/index',
    query: { id }
  })
}

</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.el-header {
  background-color: #0d6efd;
  color: #fff;
  text-align: center;
  line-height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-main {
  background-color: #fff;
  color: #333;
  text-align: center;
  height: calc(100vh - 60px);
}

.box1 {
  width: 300px;
  height: 60px;
  line-height: 60px;
}
</style>
